<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <title>产量数据输入</title>

    <!-- CSS  -->
    <#include "_css.ftl">
</head>
<body>
<#include "_nav.ftl">

<div class="layui-main" style="margin-top: 32px">
    <div class="site-title">
        <fieldset>
            <legend><a>产电单位名称</a></legend>
        </fieldset>
    </div>
    <div class="layui-row">
        <table lay-filter="factory-name-table" id="factory-name-table">
        </table>
    </div>

    <div class="site-title">
        <fieldset>
            <legend><a>产电产品名称</a></legend>
        </fieldset>
    </div>
    <div class="layui-row">
        <table lay-filter="product-name-table" id="product-name-table">
        </table>
    </div>

    <div class="site-title">
        <fieldset>
            <legend><a>数据管理</a></legend>
        </fieldset>
    </div>
    <div class="layui-form-item" style="margin-top: 32px;margin-left: -20px">
        <label class="layui-form-label">按月份筛选</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="time-filter">
        </div>
    </div>
    <div class="layui-row" style="margin-top: 32px">
        <table lay-filter="output-table" id="output-table">
        </table>
    </div>

</div>

<#include "_js.ftl">
<script type="text/html" id="toolbarTemplate">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addData">新增数据</button>
    </div>
</script>
<script>
    $(function () {
        var table = layui.table;

        table.render({
            elem: '#factory-name-table'
            , url: '/chemical/get_name' //数据接口
            , page: false
            , cols: [[ //表头
                {field: 'name1', title: '化工厂1', edit: 'text'}
                , {field: 'name2', title: '化工厂2', edit: 'text'}
            ]]
        });

        table.on('edit(factory-name-table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            $.get('/chemical/edit_name', {field: field, name: value}, function (data) {
                layer.msg("修改成功！");
            });
        });

        table.render({
            elem: '#product-name-table'
            , url: '/chemical/get_product_name' //数据接口
            , page: false
            , cols: [[ //表头
                {align: 'center', title: '化工厂1', colspan: 4}
                , {align: 'center', title: '化工厂2', colspan: 4}
            ], [
                {field: 'name1', title: '化工单位1', edit: 'text'}
                , {field: 'name2', title: '化工单位2', edit: 'text'}
                , {field: 'name3', title: '化工单位3', edit: 'text'}
                , {field: 'name4', title: '化工单位4', edit: 'text'}
                , {field: 'name5', title: '化工单位5', edit: 'text'}
                , {field: 'name6', title: '化工单位6', edit: 'text'}
                , {field: 'name7', title: '化工单位7', edit: 'text'}
                , {field: 'name8', title: '化工单位8', edit: 'text'}
                , {field: 'id', title: 'ID', hide: true}
            ]]
        });

        table.on('edit(product-name-table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            $.get('/chemical/edit_product_name', data, function (data) {
                layer.msg("修改成功！");
            });
        });

        var tableIns = table.render({
            elem: '#output-table'
            , url: '/chemical/get_output' //数据接口
            , page: true
            , limit: 10
            , toolbar: '#toolbarTemplate'
            , cols: [[ //表头
                {field: 'id', title: 'ID', hide: true}
                , {field: 'date', title: '日期'}
                , {field: 'output1', title: '化工单位1', edit: 'text'}
                , {field: 'output2', title: '化工单位2', edit: 'text'}
                , {field: 'output3', title: '化工单位3', edit: 'text'}
                , {field: 'output4', title: '化工单位4', edit: 'text'}
                , {field: 'output5', title: '化工单位5', edit: 'text'}
                , {field: 'output6', title: '化工单位6', edit: 'text'}
                , {field: 'output7', title: '化工单位7', edit: 'text'}
                , {field: 'output8', title: '化工单位8', edit: 'text'}
            ]]
        });

        table.on('edit(output-table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            $.get('/chemical/edit_output', data, function (data) {
                layer.msg("修改成功！");
                tableIns.reload();
            });

        });

        var laydate = layui.laydate;

        laydate.render({
            elem: '#time-filter', //指定元素
            type: 'month',
            done: function (value, date, endDate) {
                console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        date: value
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        });

        table.on('toolbar(output-table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addData':
                    $.get('/chemical/add_template', {}, function (str) {
                        var data;
                        layer.open({
                            title: '新增',
                            type: 1,
                            area: ['1200px', '400px'], //宽高
                            btn: ['提交'],
                            content: str,
                            success: function (layero, index) {
                                laydate.render({
                                    elem: '#chemical-date' //指定元素
                                });
                                table.init('add-input-table', {});
                                table.on('edit(add-input-table)', function (obj) {
                                    data = obj.data; //得到所在行所有键值
                                });
                            },
                            btn1: function (index, layero) {
                                $.get('/chemical/add', {
                                    date: $('#chemical-date').val(),
                                    data: JSON.stringify(data)
                                }, function (res) {
                                    layer.close(index);
                                    layer.msg("新增成功！");
                                    tableIns.reload();
                                });
                            }
                        });
                    });
                    break;
            }
        });
    });
</script>
</body>
</html>
